<template>
  <div id="Registration-detail">
    <c-title :hide="false" text="报名详情"></c-title>
    <div class="detail-content">
      <div class="top">
        <div class="list-row">
        <div class="left-image">
          <img :src="has_one_activity.thumb" />
        </div>
        <div class="right-info">
          <p class="title">{{ has_one_activity.title }}</p>
          <p class="status">
            <span v-if="has_one_order.goods_price > 0">实付: {{ $i18n.t("money") }}{{ has_one_order.goods_price }}</span
            ><span v-if="has_one_order.goods_price <= 0">免费</span>
          </p>
          <span class="people">人数: {{ detail.number }}人</span>
        </div>
        </div>
        <div class="address"><i class="iconfont icon-zx_map_locate2"></i> {{ city.substr(0, 2) }}{{ has_one_activity.address }}</div>
        <div class="time">
          <i class="iconfont icon-qhm_record"></i><span>{{ timestampToTime(has_one_activity.start_time) }}</span
          ><span>至{{ timestampToTime(has_one_activity.end_time) }}</span>
        </div>
      </div>
      <diyform :datas="datas" :payStatus="payStatus" :form_data_id="!fun.isTextEmpty(form_data_id) ? form_data_id : ''" :type="type"></diyform>
    </div>
  </div>
</template>
<script>
import Registration_detailcontroller from "./Registration_detailcontroller";
export default Registration_detailcontroller;
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
#Registration-detail {
  .detail-content {
    .top {
      margin: 0.7rem 0.8rem;
      padding: 0.7rem 0.7rem 0.9rem 0.7rem;
      border-radius: 0.5rem;
      background-color: #fff;

      .list-row {
        display: flex;
        border-bottom: 0.1rem dashed #D6D6DC;
        padding-bottom: 0.85rem;
      }

      .left-image {
        width: 8rem;
        height: 6rem;
        display: flex;

        img {
          width: 100%;
          height: 100%;
          border-radius: 0.5rem;
        }
      }

      .right-info {
        margin-left: 0.6rem;
        display: flex;
        align-items: baseline;
        flex-direction: column;
        flex: 1;
        justify-content: space-between;


        .title {
          margin-bottom: 5px;
          text-align: left;
          display: -webkit-box;
          overflow: hidden;
          white-space: normal;
          text-overflow: ellipsis;
          word-wrap: break-word;
          -webkit-line-clamp: 2;

          /* autoprefixer: off */
          -webkit-box-orient: vertical;
          font-size: 0.85rem;
          font-weight: bold;
          color: #00001C;
          margin-top: 0.15rem;
        }

        .status {
          display: flex;
          justify-content: space-between;
          width: 100%;
          flex-direction: column;
          text-align: left;
          font-size: 0.9rem;
          font-family: Source Han Sans CN-Bold, Source Han Sans CN;
          font-weight: bold;
          color: #00001C;
        }

        .people {
          margin: 0.3rem 0 0.15rem 0;
          font-size: 0.85rem;
          font-weight: 400;
          color: #F15353;
        }
      }

      .address {
        font-size: 0.75rem;
        font-weight: 400;
        color: #6E6E79;
        margin: 0.7rem 0;
        text-align: left;
        display: flex;
        align-items: center;

        .iconfont {
          margin-right: 0.3rem;
        }
      }

      .time {
        font-size: 0.75rem;
        font-weight: 400;
        color: #6E6E79;
        display: flex;
        align-items: center;
        .icon-qhm_record {
          color: #6E6E79;
          margin-right: 0.2rem;
        }
      }
    }

    .bottom {
      margin-top: 1rem;
      background-color: #fff;
      padding-bottom: 10px;

      .yd-cell-item {
        padding: 0 0.8rem !important;
        border-bottom: solid 1px #ccc;

        .yd-cell-left {
          display: flex;
          align-items: center;

          b {
            color: #f15353;
          }
        }
      }

      .piture {
        padding: 0 0.8rem;

        p {
          text-align: left;
          margin-bottom: 5px;
          display: flex;
          align-items: center;

          b {
            color: #f15353;
          }
        }

        .piture-image {
          display: flex;
          flex-wrap: wrap;
          width: 100%;
          font-size: 0;

          div:nth-child(4n) {
            margin-right: 0;
          }

          div {
            width: 22.5%;
            margin-top: 1rem;
            margin-right: 3.33%;

            img {
              width: 100%;
              height: 100%;
            }
          }
        }
      }
    }
  }
}
</style>
